<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 注册</title>
    <style>
        .container h1 {
            color: #269abc;
            font-family: 楷体;
        }

        .container h1:hover {
            color: #761c19;
        }

        .container .table caption {
            font-family: 隶书;
        }
    </style>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/jquery.md5.js"></script>
    <script src="../js/bootstrap.js"></script>
</head>
<body>
<div class="container" id="app">
    <h1 class="text-center">登录</h1>
    <div class="row">
        <form action="#" class="form-horizontal" role="form">
            <div class="form-group">
                <label class="control-label col-sm-2">账户 :</label>
                <div class="col-sm-10">
                    <input type="text" name="username" placeholder="手机/邮箱/QQ/微信" class="form-control"
                           v-model="newUser.username">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">密码 :</label>
                <div class="col-sm-10">
                    <input type="password" name="password" placeholder="请输入密码" class="form-control"
                           v-model="newUser.password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">验证密码 :</label>
                <div class="col-sm-10">
                    <input type="password" name="cPassword" placeholder="请再次输入密码" class="form-control"
                           v-model="newUser.cps">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2">性别 :</label>
                <div class="col-sm-10">
                    <input type="text" name="sex" placeholder="请输入性别" class="form-control" v-model="newUser.sex">
                </div>
            </div>
            <div class="text-center">
                <button type="button" class="btn btn-primary" v-on:click="add()">注册</button>
                <button type="button" class="btn btn-primary">登录</button>
            </div>
        </form>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <caption class="h2 text-center text-info">用户列表</caption>
        <thead>
        <tr>
            <th class="text-center">序列</th>
            <th class="text-center">用户</th>
            <th class="text-center">密码</th>
            <th class="text-center">验证密码</th>
            <th class="text-center">性别</th>
            <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(value,key) in users">
            <td class="text-center">{{key+1}}</td>
            <td class="text-center">{{value.username}}</td>
            <td class="text-center">{{value.password}}</td>
            <td class="text-center">{{value.cps}}</td>
            <td class="text-center">{{value.sex}}</td>
            <td class="text-center">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"
                        v-on:click="nowIndex=key">删除
                </button>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr class="text-center">
            <td colspan="6">
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModals"
                        v-on:click="users.length">
                    全部删除
                </button>
            </td>
        </tr>
        </tfoot>
    </table>
    <!--个体模态框-->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">您确定要删除吗？</h4>
                </div>
                <div class="modal-body">
                    <h4 style="color: red;" class="text-center">此操作不可逆</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="del()">确认
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!--全部删除模态框-->
    <div class="modal fade" id="myModals">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">您确定要删除吗？</h4>
                </div>
                <div class="modal-body">
                    <h4 style="color: red;" class="text-center">此操作不可逆</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="deletes()">确认
                    </button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    let vm = new Vue({
        el: '#app',
        data: {
            nowIndex: -1,
            newUser: {},
            users: [{username: 'Admin', password: $.md5('1'), cps: $.md5('1'), sex: '男'}]
        },
        methods: {
            add: () => {
                let array = {username: vm.newUser.username, password: $.md5(vm.newUser.password),cps:$.md5(vm.newUser.cps), sex: vm.newUser.sex};
                vm.users.push(array);
                vm.newUser = {};
            },
            del: () => {
                vm.users.splice(vm.nowIndex, 1);
            },
            deletes: () => {
                vm.users.splice(0, vm.users.length);
            }
        }
    });
</script>
</html>